
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Starter Template for Bootstrap</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <!-- Custom styles for this template -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
      .clearfix:after{
        content:"";
        display:table;
        height:0;
        visibility:both;
        clear:both;
      }

      .clearfix{
        *zoom:1;    /* IE/7/6*/
      }

      .starter-template {
        padding: 40px 15px;
        text-align: center;
      }

      .gap-top {
        padding: 10px 15px;
      }
    </style>
  </head>

  <body>
    
      <nav class="navbar navbar-inverse ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">云天科技</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#tab1" data-toggle="tab">设置奖品</a></li>
            <li><a href="#tab2" data-toggle="tab">获奖查询</a></li>
            <li><a href="#tab3" data-toggle="tab">删除奖品</a></li>
            <li><a href="#tab4" data-toggle="tab">联系我们</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
  
    

      <div class="container">

        <div class="tab-content">


          <div class="tab-pane  starter-template active " id="tab1">     
               <div class="gap-top">
              <span>奖项类别:</span> 
            <div class="btn-group">
              <button id="category-btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span id="prize-category">请选择</span>
                <span class="caret"></span>
              </button> 
              <ul id="category-ul" class="dropdown-menu">
                <li>
                  <a href="#" class="con-prize">特等奖</a>
                </li>
                <li>
                  <a href="#" class="con-prize">一等奖</a>
                </li>
                <li>
                  <a href="#" class="con-prize">二等奖</a>
                </li>
                <li>
                  <a href="#" class="con-prize">三等奖</a>
                </li>
              </ul>
            </div>
          </div>
          

            <div class="gap-top">
              <span>奖项级别:</span> 
                <div class="btn-group">
                  <button id="level-btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span id="prize-level">请选择</span>
                    <span class="caret"></span>
                  </button> 
                  <ul id="level-ul" class="dropdown-menu">
                    <li>
                      <a href="#" class="con-prize">1</a>
                    </li>
                    <li>
                      <a href="#" class="con-prize">2</a>
                    </li>
                    <li>
                      <a href="#" class="con-prize">3</a>
                    </li>
                    <li>
                      <a href="#" class="con-prize">4</a>
                    </li>
                    <li>
                      <a href="#" class="con-prize">5</a>
                    </li>
                  </ul>
                </div>
            </div>
           


          <div class="input-group gap-top">
            <span class="input-group-addon">奖项名称：</span>
            <input type="text" class="form-control" placeholder="请输入奖品的名字" aria-describedby="basic-addon1" >
          </div>

          <div class="input-group gap-top">
            <span class="input-group-addon">奖项数量：</span>
            <input type="text" class="form-control" placeholder="请输入奖品的数量" aria-describedby="basic-addon1" >
          </div>

          <button id="add-submit" class="btn btn-default " type="submit">提交</button>



         </div>  


         <div class="tab-pane starter-template" id="tab2">     
          <p>请输入获奖的手机号：</p> 
          <div class="input-group">
            <input type="text" class="form-control" placeholder="phone number" aria-describedby="basic-addon2">
            <span class="input-group-addon" id="basic-addon2">查询</span>
          </div>
         
        </div>    
        <div class="tab-pane starter-template" id="tab3">     
        
          
              <div class="input-group gap-top" style="text-align: center;">
                <span class="input-group-addon" id="basic-addon1">奖品名称</span>
                <input id="prizename" type="text" class="form-control"  aria-describedby="basic-addon1" >
              </div>

              <div class="input-group gap-top" style="text-align: center;">
                <span class="input-group-addon" id="basic-addon1">奖品数量</span>
                <input id="prizenum" type="text" class="form-control"  aria-describedby="basic-addon1" >
              </div>

              <button id="add-submit" class="btn btn-default " type="submit">提交</button>
        </div> <!-- tab3 -->

        <div class="tab-pane starter-template" id="tab4">  
          <p>技术人员热线：1832088888</p>
        </div>


      </div><!-- tab-content -->

    </div><!-- /.container -->

    <script src="lib/jquery/jquery.js"></script>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript">


      $('#category-ul li').on('click', function(){
          $('#category-btn').text($(this).text());
      });

      $('#level-ul li').on('click', function(){
          $('#level-btn').text($(this).text());
      });

      $('#add-submit').on('click', function(){
          // alert("hello")
          var prizedata = {};
          prizedata.category = $('#category-btn').text();
          prizedata.level = $('#level-btn').text()
          prizedata.prizename = $('#prizename').text()

          $.ajax({
              url:"http://127.0.0.1:8000/add_prize/",
              type:'POST', //GET
              async:true,    //或false,是否异步
              data:prizedata,
              timeout:5000,    //超时时间  
              contentType: "application/json; charset=utf-8", 
              success:function(data,textStatus,jqXHR){
                  console.log(data)            
              },
              error:function(xhr,textStatus){
                  console.log('错误')           
              }
          })

      });

      

    </script>
  </body>
</html>
